<template>
	<view class="page">
		<view class="banner"><image src="@/static/contact/banner.jpg" mode="widthFix"></image></view>
		<view class="connect-wrap">
			<view class="connect-item">
				<view class="left">
					<text class="tpf-iconfont icon-dianhua ico">{{'\ue739'}}</text>
					<text class="connect-txt">15523362830</text>
				</view>
				<text class="right-txt callPhone" @tap="callPhone">拨打电话</text>
			</view>
			
			<view class="connect-item">
				<view class="left">
					<text class="tpf-iconfont icon-qq ico">{{'\ue677'}}</text>
					<text class="connect-txt">510974211</text>
				</view>
			</view>
			
			<view class="connect-item">
				<view class="left">
					<text class="tpf-iconfont icon-youxiang ico">{{'\ue687'}}</text>
					<text class="connect-txt">510974211@qq.com</text>
				</view>
			</view>
			
			<view class="connect-item">
				<view class="left">
					<text class="tpf-iconfont icon-dizhi01 ico">{{'\ue62c'}}</text>
					<text class="connect-txt">重庆观音桥</text>
				</view>
				<text class="right-txt map">地图</text>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return {
			
		}
	},
	methods:{
		callPhone(){
			uni.makePhoneCall({
				phoneNumber:"15523362830"
			})
		}
	}
}
</script>

<style lang="scss">
.page{
	background-color: $tpf-bg-color-white-smoke;
	height: 100vh;
}
.banner{
	width: 750rpx;
	image{
		width: 750rpx;
	}
}
.connect-wrap{
	padding: 20rpx;
}
.connect-item{
	@include tpframe-flex;
	background-color: #FFFFFF;
	padding:30rpx 10px;
	margin-bottom: 20rpx;
	.left{
		@include tpframe-flex;
		.ico{
			margin-right:10rpx;
			font-size:46rpx;
			color: #666;
		}
	}
}
.callPhone{
	color: $tpf-text-color-deep-sky-blue;
}
.connect-txt{
	font-size: 28rpx;
	color: #666;
}
.map{
	color: #666;
}
</style>
